<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件信息查看器</title>
    <!-- Element UI CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- Vue.js -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- Element UI JS -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .file-info-container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .file-tree {
            margin-top: 20px;
        }
        .file-icon {
            margin-right: 8px;
        }
        .file-size {
            color: #909399;
            font-size: 12px;
        }
        .file-time {
            color: #909399;
            font-size: 12px;
        }
        .file-permissions {
            font-family: monospace;
            background: #f5f7fa;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
        }
        .download-btn {
            margin-left: 10px;
        }
        .property-card {
            margin-bottom: 20px;
        }
        .property-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #ebeef5;
        }
        .property-item:last-child {
            border-bottom: none;
        }
        .property-label {
            font-weight: 500;
            color: #606266;
            min-width: 100px;
        }
        .property-value {
            color: #303133;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="file-info-container">
            <!-- 页面标题 -->
            <el-page-header @back="goBack" content="文件信息查看器">
            </el-page-header>

            <!-- 查询表单 -->
            <el-card class="property-card">
                <div slot="header">
                    <span>查询文件信息</span>
                </div>
                <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                    <el-form-item label="文件路径">
                        <el-input 
                            v-model="queryForm.folderPath" 
                            placeholder="请输入文件或文件夹路径"
                            style="width: 300px;">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getFileInfo" :loading="loading">
                            <i class="el-icon-search"></i> 查询
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-card>

            <!-- 服务器信息 -->
            <el-card v-if="fileData" class="property-card">
                <div slot="header">
                    <span>服务器信息</span>
                </div>
                <div class="property-item">
                    <span class="property-label">服务器IP:</span>
                    <span class="property-value">{{ fileData.serverIp }}</span>
                </div>
                <div class="property-item">
                    <span class="property-label">查询路径:</span>
                    <span class="property-value">{{ fileData.folderPath }}</span>
                </div>
                <div class="property-item">
                    <span class="property-label">状态:</span>
                    <el-tag :type="fileData.status === '1' ? 'success' : 'danger'">
                        {{ fileData.status === '1' ? '成功' : '失败' }}
                    </el-tag>
                </div>
            </el-card>

            <!-- 文件树形结构 -->
            <el-card v-if="fileData && fileData.data" class="file-tree">
                <div slot="header">
                    <span>文件结构</span>
                    <el-button 
                        v-if="!fileData.data.isDirectory"
                        style="float: right; padding: 3px 0" 
                        type="text" 
                        @click="downloadFile(fileData.data)">
                        <i class="el-icon-download"></i> 下载文件
                    </el-button>
                </div>
                
                <!-- 根节点信息 -->
                <div style="margin-bottom: 20px;">
                    <file-info-item 
                        :item="fileData.data" 
                        :server-ip="fileData.serverIp"
                        @download="downloadFile">
                    </file-info-item>
                </div>

                <!-- 树形结构 -->
                <el-tree
                    v-if="fileData.data.children && fileData.data.children.length > 0"
                    :data="[fileData.data]"
                    :props="treeProps"
                    :expand-on-click-node="false"
                    default-expand-all>
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <tree-node-item 
                            :item="data" 
                            :server-ip="fileData.serverIp"
                            @download="downloadFile">
                        </tree-node-item>
                    </span>
                </el-tree>
            </el-card>

            <!-- 空状态 -->
            <el-empty v-if="!fileData && !loading" description="请输入路径查询文件信息"></el-empty>
        </div>
    </div>

    <script>
        // 简洁的树节点组件
        Vue.component('tree-node-item', {
            props: ['item', 'serverIp'],
            template: `
                <div style="display: flex; align-items: center; padding: 4px 0; min-height: 32px;">
                    <i :class="getFileIcon(item)" style="font-size: 14px; color: #409eff; margin-right: 6px;"></i>
                    <span style="font-weight: 500; margin-right: 8px; color: #303133;">{{ item.name }}</span>
                    <el-tag size="mini" :type="item.isDirectory ? 'primary' : 'success'" style="margin-right: 8px;">
                        {{ item.isDirectory ? '文件夹' : '文件' }}
                    </el-tag>
                    <span v-if="item.size && item.size !== '-'" style="font-size: 12px; color: #909399; margin-right: 8px;">
                        {{ item.size }}
                    </span>
                    <span v-if="item.lastModified" style="font-size: 12px; color: #909399; margin-right: 8px;">
                        {{ item.lastModified }}
                    </span>
                    <el-button
                        size="mini" 
                        type="text"
                        @click="$emit('download', item)">
                        <i class="el-icon-download"></i>
                    </el-button>
                </div>
            `,
            methods: {
                getFileIcon(item) {
                    if (item.isDirectory) {
                        return 'el-icon-folder';
                    }
                    const ext = item.name.split('.').pop().toLowerCase();
                    const iconMap = {
                        'txt': 'el-icon-document',
                        'pdf': 'el-icon-document',
                        'doc': 'el-icon-document',
                        'docx': 'el-icon-document',
                        'jpg': 'el-icon-picture',
                        'jpeg': 'el-icon-picture',
                        'png': 'el-icon-picture',
                        'gif': 'el-icon-picture',
                        'mp4': 'el-icon-video-camera',
                        'avi': 'el-icon-video-camera',
                        'mp3': 'el-icon-headset',
                        'wav': 'el-icon-headset',
                        'zip': 'el-icon-box',
                        'rar': 'el-icon-box',
                        'js': 'el-icon-document',
                        'html': 'el-icon-document',
                        'css': 'el-icon-document',
                        'java': 'el-icon-document',
                        'py': 'el-icon-document'
                    };
                    return iconMap[ext] || 'el-icon-document';
                }
            }
        });

        // 文件信息组件
        Vue.component('file-info-item', {
            props: ['item', 'serverIp'],
            template: `
                <div class="file-info-item" style="padding: 12px; border: 1px solid #ebeef5; border-radius: 6px; margin-bottom: 10px; background: #fafafa;">
                    <!-- 文件名和操作按钮 -->
                    <div style="display: flex; align-items: center; margin-bottom: 12px;">
                        <i :class="getFileIcon(item)" class="file-icon" style="font-size: 18px; color: #409eff; margin-right: 8px;"></i>
                        <span style="font-weight: 600; margin-right: 12px; font-size: 15px; color: #303133;">{{ item.name }}</span>
                        <el-tag size="mini" :type="item.isDirectory ? 'primary' : 'success'" style="margin-right: 10px;">
                            {{ item.isDirectory ? '文件夹' : '文件' }}
                        </el-tag>
                        <el-button
                            size="mini" 
                            type="primary"
                            plain
                            @click="$emit('download', item)">
                            <i class="el-icon-download"></i> 下载
                        </el-button>
                    </div>
                    
                    <!-- 文件属性信息 -->
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; font-size: 13px;">
                        <div v-if="item.path" style="display: flex; align-items: flex-start; padding: 4px 0;">
                            <i class="el-icon-folder" style="margin-right: 6px; color: #909399; margin-top: 2px; flex-shrink: 0;"></i>
                            <div>
                                <div style="color: #909399; font-size: 11px; margin-bottom: 2px;">路径</div>
                                <div style="color: #606266; word-break: break-all; line-height: 1.4;">{{ item.path }}</div>
                            </div>
                        </div>
                        
                        <div v-if="item.size" style="display: flex; align-items: flex-start; padding: 4px 0;">
                            <i class="el-icon-document" style="margin-right: 6px; color: #909399; margin-top: 2px; flex-shrink: 0;"></i>
                            <div>
                                <div style="color: #909399; font-size: 11px; margin-bottom: 2px;">大小</div>
                                <div style="color: #606266;">{{ formatFileSize(item.size) }}</div>
                            </div>
                        </div>
                        
                        <div v-if="item.lastModified" style="display: flex; align-items: flex-start; padding: 4px 0;">
                            <i class="el-icon-time" style="margin-right: 6px; color: #909399; margin-top: 2px; flex-shrink: 0;"></i>
                            <div>
                                <div style="color: #909399; font-size: 11px; margin-bottom: 2px;">修改时间</div>
                                <div style="color: #606266;">{{ item.lastModified }}</div>
                            </div>
                        </div>
                        
                        <div v-if="item.permissions" style="display: flex; align-items: flex-start; padding: 4px 0;">
                            <i class="el-icon-lock" style="margin-right: 6px; color: #909399; margin-top: 2px; flex-shrink: 0;"></i>
                            <div>
                                <div style="color: #909399; font-size: 11px; margin-bottom: 2px;">权限</div>
                                <div style="color: #606266;">
                                    <span class="file-permissions">{{ item.permissions }}</span>
                                </div>
                            </div>
                        </div>
                        
                        <div v-if="item.owner" style="display: flex; align-items: flex-start; padding: 4px 0;">
                            <i class="el-icon-user" style="margin-right: 6px; color: #909399; margin-top: 2px; flex-shrink: 0;"></i>
                            <div>
                                <div style="color: #909399; font-size: 11px; margin-bottom: 2px;">所有者</div>
                                <div style="color: #606266;">{{ item.owner }}</div>
                            </div>
                        </div>
                        
                        <div v-if="item.group" style="display: flex; align-items: flex-start; padding: 4px 0;">
                            <i class="el-icon-s-custom" style="margin-right: 6px; color: #909399; margin-top: 2px; flex-shrink: 0;"></i>
                            <div>
                                <div style="color: #909399; font-size: 11px; margin-bottom: 2px;">用户组</div>
                                <div style="color: #606266;">{{ item.group }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            `,
            methods: {
                getFileIcon(item) {
                    if (item.isDirectory) {
                        return 'el-icon-folder';
                    }
                    const ext = item.name.split('.').pop().toLowerCase();
                    const iconMap = {
                        'txt': 'el-icon-document',
                        'pdf': 'el-icon-document',
                        'doc': 'el-icon-document',
                        'docx': 'el-icon-document',
                        'jpg': 'el-icon-picture',
                        'jpeg': 'el-icon-picture',
                        'png': 'el-icon-picture',
                        'gif': 'el-icon-picture',
                        'mp4': 'el-icon-video-camera',
                        'avi': 'el-icon-video-camera',
                        'mp3': 'el-icon-headset',
                        'wav': 'el-icon-headset',
                        'zip': 'el-icon-box',
                        'rar': 'el-icon-box',
                        'js': 'el-icon-document',
                        'html': 'el-icon-document',
                        'css': 'el-icon-document',
                        'java': 'el-icon-document',
                        'py': 'el-icon-document'
                    };
                    return iconMap[ext] || 'el-icon-document';
                },
                formatFileSize(size) {
                    // 如果已经是格式化的字符串（包含单位），直接返回
                    if (!size || size === '0' || size === '-') return size || '0 B';
                    
                    // 如果包含单位字母，说明已经格式化过了
                    if (/[A-Za-z]/.test(size)) {
                        return size;
                    }
                    
                    // 如果是纯数字，按字节处理
                    const bytes = parseInt(size);
                    if (isNaN(bytes)) return size;
                    
                    const k = 1024;
                    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
                    const i = Math.floor(Math.log(bytes) / Math.log(k));
                    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
                }
            }
        });

        new Vue({
            el: '#app',
            data() {
                return {
                    queryForm: {
                        folderPath: '/ydTest'
                    },
                    fileData: null,
                    loading: false,
                    treeProps: {
                        children: 'children',
                        label: 'name'
                    }
                }
            },
            methods: {
                async getFileInfo() {
                    if (!this.queryForm.folderPath.trim()) {
                        this.$message.warning('请输入文件路径');
                        return;
                    }

                    this.loading = true;

                    try {
/*                        // 使用模拟数据进行测试
                        const mockData = {
                            "code": 200,
                            "msg": null,
                            "data": {
                                "folderPath": "/ydTest",
                                "data": {
                                    "path": "/ydTest",
                                    "size": "-",
                                    "children": [
                                        {
                                            "path": "/ydTest/flowableDemo-2025-07-24-13-12-33098.jar",
                                            "size": "55.9MB",
                                            "children": [],
                                            "permissions": "-rw-r--r--",
                                            "name": "flowableDemo-2025-07-24-13-12-33098.jar",
                                            "lastModified": "2025年07月24日 13:13",
                                            "type": "file",
                                            "isDirectory": false
                                        },
                                        {
                                            "path": "/ydTest/logs",
                                            "size": "-",
                                            "children": [
                                                {
                                                    "path": "/ydTest/logs/ruoyi-system",
                                                    "size": "-",
                                                    "children": [
                                                        {
                                                            "path": "/ydTest/logs/ruoyi-system/error.log",
                                                            "size": "0.03MB",
                                                            "children": [],
                                                            "permissions": "-rw-r--r--",
                                                            "name": "error.log",
                                                            "lastModified": "2025年07月24日 11:30",
                                                            "type": "file",
                                                            "isDirectory": false
                                                        },
                                                        {
                                                            "path": "/ydTest/logs/ruoyi-system/info.log",
                                                            "size": "0.13MB",
                                                            "children": [],
                                                            "permissions": "-rw-r--r--",
                                                            "name": "info.log",
                                                            "lastModified": "2025年07月24日 13:15",
                                                            "type": "file",
                                                            "isDirectory": false
                                                        },
                                                        {
                                                            "path": "/ydTest/logs/ruoyi-system/info.2025-07-23.log",
                                                            "size": "0.12MB",
                                                            "children": [],
                                                            "permissions": "-rw-r--r--",
                                                            "name": "info.2025-07-23.log",
                                                            "lastModified": "2025年07月23日 17:18",
                                                            "type": "file",
                                                            "isDirectory": false
                                                        },
                                                        {
                                                            "path": "/ydTest/logs/ruoyi-system/error.2025-07-23.log",
                                                            "size": "< 0.01MB",
                                                            "children": [],
                                                            "permissions": "-rw-r--r--",
                                                            "name": "error.2025-07-23.log",
                                                            "lastModified": "2025年07月23日 15:12",
                                                            "type": "file",
                                                            "isDirectory": false
                                                        }
                                                    ],
                                                    "permissions": "drwxr-xr-x",
                                                    "name": "ruoyi-system",
                                                    "lastModified": "2025年07月24日 11:07",
                                                    "type": "folder",
                                                    "isDirectory": true
                                                }
                                            ],
                                            "permissions": "drwxr-xr-x",
                                            "name": "logs",
                                            "lastModified": "2025年07月23日 15:07",
                                            "type": "folder",
                                            "isDirectory": true
                                        }
                                    ],
                                    "permissions": "drwxr-xr-x",
                                    "name": "ydTest",
                                    "lastModified": "",
                                    "isDirectory": true
                                },
                                "serverIp": "172.31.242.11",
                                "message": "获取成功",
                                "status": "1"
                            }
                        };

                        // 模拟网络延迟
                        await new Promise(resolve => setTimeout(resolve, 500));

                        this.fileData = mockData.data;
                        this.$message.success('获取文件信息成功（模拟数据）');*/

                        // 真实接口调用（注释掉用于测试）
                        const response = await axios.get('/file/info', {
                            params: {
                                folderPath: this.queryForm.folderPath
                            }
                        });
                        
                        if (response.data.code === 200) {
                            this.fileData = response.data.data;
                            this.$message.success('获取文件信息成功');
                        } else {
                            this.$message.error(response.data.msg || '获取文件信息失败');
                        }
                    } catch (error) {
                        console.error('获取文件信息失败:', error);
                        this.$message.error('获取文件信息失败: ' + error.message);
                    } finally {
                        this.loading = false;
                    }
                },
                
                downloadFile(fileItem) {
                    
                    // 构建下载URL
                    const downloadUrl = `/file/download?serverIp=${this.fileData.serverIp}&filePath=${encodeURIComponent(fileItem.path)}&type=${fileItem.type}`;
                    
                    // 创建隐藏的下载链接
                    const link = document.createElement('a');
                    link.href = downloadUrl;
                    link.download = fileItem.name;
                    link.style.display = 'none';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    
                    this.$message.success('开始下载文件: ' + fileItem.name);
                },
                
                goBack() {
                    window.history.back();
                }
            },
            
            mounted() {
                // 页面加载时自动查询默认路径
                this.getFileInfo();
            }
        })
    </script>
</body>
</html>